<template>
  <div>
    <h1>【aty-scroll】 component demo</h1>
    <p>【aty-scroll】 本质</p>
    <aty-row class="aty-scroll-box">

      <aty-row>
        <aty-title :level="4">1.【aty-scroll】 基础-垂直滚动条</aty-title>
        <aty-panel>speed 控制每次滚动内容距离 </aty-panel>
        <aty-scroll class="aty-scroll-1" :speed="53">
          <aty-date-picker type="date" placeholder="选择日期" style="width: 200px" /><br />
          <aty-date-picker type="date" placeholder="选择日期" style="width: 200px" /><br />
          <aty-date-picker type="date" placeholder="选择日期" style="width: 200px" /><br />
          <div style="height: 200px;"></div>
          <aty-select :data="cityList" :transfer="false" style="width: 100px" />
          <aty-panel class="fd-data-item" v-for="(item,index) in data" :key="index" :text="'数据'+index" />

        </aty-scroll>
      </aty-row>

      <aty-row>
        <aty-title :level="4">2.【aty-scroll】 基础-水平滚动条</aty-title>
        <aty-panel>speed 控制每次滚动内容距离 </aty-panel>
        <aty-scroll class="aty-scroll-2" :speed="53">
          <aty-panel class="fd-data-content">
            <aty-panel class="fd-data-item" v-for="(item,index) in data3" :key="index" :text="'数据'+index" />
          </aty-panel>
        </aty-scroll>
      </aty-row>

      <aty-row>
        <aty-title :level="4">3.【aty-scroll】 基础-水平，垂直滚动条</aty-title>
        <aty-panel>speed 控制每次滚动内容距离 </aty-panel>
        <aty-scroll class="aty-scroll-3" :speed="53">
          <aty-panel class="fd-data-content">
            <aty-panel class="fd-data-item" v-for="(item,index) in data" :key="index" :text="'数据'+index" />
          </aty-panel>
        </aty-scroll>
      </aty-row>

      <aty-row>
        <aty-title :level="4">4.【aty-scroll】 默认不显示滚动条，鼠标移入显示滚动条</aty-title>
        <aty-panel>show控制默认是否显示滚动条</aty-panel>
        <aty-scroll class="aty-scroll-1" :speed="53" :show="false">
          <aty-panel class="fd-data-item" v-for="(item,index) in data" :key="index" :text="'数据'+index" />
        </aty-scroll>
      </aty-row>

      <aty-row>
        <aty-title :level="4">5.【aty-scroll】 设置滚动条的位置</aty-title>
        <aty-panel>speed 控制每次滚动内容距离 </aty-panel>
        <aty-panel>name 控制该滚动条的名称 </aty-panel>
        <aty-panel>  update(top,left,callback) 更新滚动条top和left </aty-panel>
        <aty-panel>  updateLeft(left,callback) 更新滚动条left </aty-panel>
        <aty-panel>  updateTop(top,callback) 更新滚动条top</aty-panel>
        <aty-button text="go to x,y 200" type="primary" @click="clickGoto" />
        <aty-button text="go to x 400" type="primary" @click="clickGotoX" />
        <aty-button text="go to y 400" type="primary" @click="clickGotoY" />

        <aty-scroll class="aty-scroll-3"
                    :speed="53"
                    @scroll="scroll"
                    @ready="ready"
                    @destory="destory"
                    name="testScrollBar">
          <aty-panel class="fd-data-content">
            <aty-panel class="fd-data-item" v-for="(item,index) in data" :key="index" :text="'数据'+index" />
          </aty-panel>
        </aty-scroll>
      </aty-row>

      <aty-row>
        <aty-title :level="4">6.【aty-scroll】 下拉刷加载，上拉刷新</aty-title>
        <aty-panel>speed 控制每次滚动内容距离 </aty-panel>
        <aty-scroll class="aty-scroll-1"
                    :speed="53"
                    name="testScrollBar2"
                    delay="1000"
                    @ready="ready"
                    @destory="destory"
                    @scrolltoupper="scrolltoupper"
                    @scrolltolower="scrolltolower">
          <div class="fd-refresh" v-show="refreshing">数据刷新中...</div>
          <aty-panel class="fd-data-item" v-for="(item,index) in data2" :key="index" :text="'数据'+index" />
          <div class="fd-loading" v-show="loading">数据加载中...</div>
        </aty-scroll>
      </aty-row>
      <aty-row>
        <aty-title :level="4">7.【aty-scroll】自动监控变化</aty-title>
        <aty-panel>speed 控制每次滚动内容距离 </aty-panel>
        <aty-scroll class="aty-scroll-1"
                    :speed="53"
                    name="testScrollBar2">
          <aty-panel class="fd-data-item" v-for="(item,index) in data4" :key="index" :text="'数据'+index" />
        </aty-scroll>
      </aty-row>
    </aty-row>

  </div>
</template>
<script>
export default {
  data () {
    return {
      testScrollBar: null,
      testScrollBar2: null,
      data: new Array(40), // .fill('数据')
      data2: [1, 2, 3, 4, 5], // .fill('数据')
      data4: [1, 2, 3, 4, 5], // .fill('数据')
      data3: new Array(60), // .fill('数据')
      loading: false,
      refreshing: false,
      timer: null,
      cityList: [
        {
          code: 'beijing',
          codeType: 'beijing',
          name: '北京市'
        },
        {
          code: 'shanghai',
          codeType: 'shanghai',
          name: '上海市'
        },
        {
          code: 'shenzhen',
          codeType: 'shenzhen',
          name: '深圳市'
        },
        {
          code: 'hangzhou',
          codeType: 'hangzhou',
          name: '杭州市'
        },
        {
          code: 'nanjing',
          codeType: 'nanjing',
          name: '南京市'
        },
        {
          code: 'chongqing',
          codeType: 'chongqing',
          name: '重庆市'
        },
        {
          code: 'guangdong',
          codeType: 'guangdong',
          name: '广东省'
        },
        {
          code: 'guangxi',
          codeType: 'guangxi',
          name: '广西'
        },
        {
          code: 'hainan',
          codeType: 'hainan',
          name: '海南省'
        },
        {
          code: 'xinjiang',
          codeType: 'xinjiang',
          name: '新疆'
        }
      ]
    }
  },
  methods: {
    scroll (top, left, _this) {
      console.log(top, left, _this)
    },
    // 装载
    ready (_this) {
      this[_this.name] = _this

      console.log(_this.name)
    },
    // 销毁
    destory (_this) {
      this[_this.name] = null
    },
    clickGoto () {
      // 垂直和水平滚动条都移动到200的位置;
      this.testScrollBar.update(200, 200, function (top, left) {
        alert('更新了水平和垂直滚动条;top:' + top + 'left:' + left)
      })
    },
    clickGotoX () {
      // 水平滚动条移动到400的位置;
      this.testScrollBar.updateLeft(400, function (top, left) {
        alert('更新了水平滚动条;top:' + top + 'left:' + left)
      })
    },
    clickGotoY () {
      // 垂直滚动条移动到400的位置;
      this.testScrollBar.updateTop(400, function (top, left) {
        alert('更新了垂直滚动条;top:' + top + 'left:' + left)
      })
    },
    scrolltoupper (top, left, scrollbar) {
      var _this = this

      console.log('滚动到顶部---刷新')
      if (_this.refreshing) {
        return false
      }

      // 清除的定时器
      if (_this.timer) {
        clearTimeout(_this.timer)
        _this.loading = false
        _this.refreshing = false
      }
      // 正在刷新
      _this.refreshing = true
      // 更新滚动条
      scrollbar.update(0, left, function () {
        console.log('数据加载中....2秒后刷新数据')
      })

      // 请求数据的定时器
      _this.timer = setTimeout(function () {
        console.log('数据刷新成功')
        _this.data2 = [1, 2, 3, 4, 5]
        // 停止刷新
        _this.refreshing = false
        // 更新滚动条
        scrollbar.update(top, left, function () {
          console.log('更新滚动条成功')
        })
      }, 2000)
    },
    scrolltolower (top, left, scrollbar) {
      var _this = this

      console.log('滚动到底部--加载数据')
      if (_this.loading) {
        return false
      }

      // 清除的定时器
      if (_this.timer) {
        clearTimeout(_this.timer)
        _this.loading = false
        _this.refreshing = false
      }
      _this.loading = true
      // 更新滚动条
      scrollbar.update(top + 60, left, function () {
        console.log('数据加载中....2秒后加载数据！')
      })

      // 请求数据的定时器
      _this.timer = setTimeout(function () {
        console.log('数据加载成功')
        _this.data2 = _this.data2.concat([1, 2, 3, 4, 5])
        // 停止加载数据
        _this.loading = false
        // 更新滚动条
        scrollbar.update(top, left, function () {
          console.log('更新滚动条成功')
        })
      }, 5000)
    }

  },
  created () {
    const i = 6

    /*
     * setInterval(()=>{
     * console.log(this.data2)
     *this.data4.push(i++)},2000)
     */
  }
  //  components: { Alert, Icon }
}
</script>

<style  lang="less"  type="text/less">

    .aty-scroll-box {
        margin: 20px;
        text-align: left;
    }
    .fd-refresh,
    .fd-loading {
        margin: 15px;
        height: 40px;
        text-align: center;
        font: 14px/40px "Microsoft Yahei";
        border: 1px solid #ddd;
    }
    .aty-scroll-1 {
        max-height: 450px;
        border: 1px solid #ddd;
        .fd-data-item {
            margin: 15px;
            height: 150px;
            border: 1px solid #ddd;;
        }
    }
    .aty-scroll-2 {
        border: 1px solid #ddd;
        .fd-data-content {
            width: 3000px;
            &:after{
                 content:"";
                 display: block;
                 clear: both;
             }
        }
        .fd-data-item {
            float: left;
            margin: 15px;
            width: 100px;
            height: 50px;
            border: 1px solid #ddd;;
        }
    }
    .aty-scroll-3 {
        width: 360px;
        height: 360px;
        border: 1px solid #ddd;
        .fd-data-content {
            width: 720px;
            &:after{
                  content:"";
                 display: block;
                 clear: both;
             }
        }
        .fd-data-item {
            float: left;
            margin: 15px;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;;
        }
    }

</style>
